<template>
  <div>
    <el-form ref="elForm" :model="formData" size="medium" label-width="100px">
      <el-form-item label="菜单类型">
        <el-select
          :disabled="isTypeNameedit === true"
          v-model="formData.FTYPE"
          placeholder="请选择菜单类型"
          clearable
          :style="{ width: '100%' }"
        >
          <el-option
            v-for="(item, index) in field108Options"
            :key="index"
            :label="item.label"
            :value="item.value"
            :disabled="item.disabled"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="上级菜单">
        {{ formData.FParentName }}
      </el-form-item>
      <el-form-item label="菜单名称">
        <el-input
          v-model="formData.FMenuName"
          placeholder="请输入菜单名称"
          clearable
          :style="{ width: '100%' }"
        ></el-input>
      </el-form-item>
      <el-form-item label="顺序号">
        <el-input-number
          v-model="formData.FOrderIndex"
          placeholder="请输入顺序号"
          :step="1"
          :min="0"
        ></el-input-number>
      </el-form-item>
      <el-form-item label="菜单图标">
        <span v-if="formData.FIcon !== undefined && formData.FIcon !== ''">
          <nx-svg-icon
            :class-name="formData.FIcon + '-icon'"
            :icon-class="formData.FIcon"
            slot="avatar"
        /></span>
        <a-button
          type="dashed"
          icon="search"
          @click="selectIcon"
          style="margin-left: 40px;"
        >
          选择
        </a-button>
      </el-form-item>
      <el-form-item label="路径">
        <el-input
          v-model="formData.FMenuUrl"
          placeholder="请输入路径"
          clearable
          :style="{ width: '100%' }"
        ></el-input>
      </el-form-item>
      <el-form-item size="large" style="    height: 60px;">
        <el-button type="primary" @click="submitForm">提交</el-button>
        <el-button @click="resetForm">重置</el-button>
      </el-form-item>
    </el-form>
    <zhlDialog
      title="图标选择"
      ref="selectIcondialog"
      width="860px"
      class="my-dialog"
    >
      <selecticons @selected="selectconfirm"></selecticons>
    </zhlDialog>
  </div>
</template>
<script>
import { selectOne, SaveMenu } from '@/api/tappmenu'
import nxSvgIcon from '@/components/nx-svg-icon/index'
import selecticons from './icons.vue'
export default {
  components: { nxSvgIcon, selecticons },
  props: ['isTypeNameedit', 'menudata'],
  data() {
    return {
      formData: {
        FTYPE: undefined,
        FParentName: undefined,
        FMenuName: undefined,
        FOrderIndex: 0,
        FIcon: undefined,
        FMenuUrl: undefined,
        FParentID: undefined,
        FID: undefined
      },
      field108Options: [
        { label: '文件夹', value: 1 },
        { label: '菜单', value: 4 }
      ]
    }
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {
    if (this.menudata !== undefined && this.menudata !== null) {
      if (this.menudata.fid !== undefined && this.menudata.fid !== null) {
        selectOne(this.menudata.fid).then(res => {
          if (res.code === 0) {
            this.formData.FTYPE = res.data.ftype
            this.formData.FParentName = this.menudata.FParentName
            this.formData.FMenuName = res.data.fmenuname
            this.formData.FOrderIndex = res.data.forderindex
            this.formData.FIcon = res.data.ficon
            this.formData.FMenuUrl = res.data.fmenuurl
            this.formData.FParentID = res.data.fparentid
            this.formData.FID = res.data.fid
          }
        })
      } else {
        Object.assign(this.formData, this.menudata)
        this.formData.FTYPE = this.menudata.FType
      }
    }
  },
  methods: {
    submitForm() {
      if (
        this.formData.FMenuName === '' ||
        this.formData.FMenuName === undefined
      ) {
        this.$message.success('请输入菜单名称')
        return
      }
      if (
        this.formData.FOrderIndex === '' ||
        this.formData.FOrderIndex === undefined
      ) {
        this.$message.success('请输入顺序号')
        return
      }
      if (
        this.formData.FTYPE === 4 &&
        (this.formData.FMenuUrl === undefined ||
          this.formData.FMenuUrl === null)
      ) {
        this.$message.success('请输入路径')
        return
      }
      if (this.formData.FTYPE === 1) {
        this.formData.FMenuUrl = null
      }
      SaveMenu(this.formData).then(res => {
        if (res.code === 0) {
          this.formData.fid = res.data.fid
          this.$emit('SaveMenuinfo', this.formData)
          this.$message.success('保存成功！')
        }
      })
    },
    selectIcon() {
      this.$refs.selectIcondialog.visible = true
    },
    resetForm() {
      this.formData.FMenuName = undefined
      this.formData.FOrderIndex = 0
      this.formData.FIcon = undefined
      this.formData.FMenuUrl = undefined
    },
    selectconfirm(iconname) {
      this.formData.FIcon = iconname
      this.$refs.selectIcondialog.visible = false
    }
  }
}
</script>
